<template>
  <div>
    <ul>
      <li v-for="(item, i) in findList" :key="i">
        <span>{{ item.updateTime }}</span
        ><span>{{ item.userName }}</span
        ><span>{{ item.description }}</span>
        <span>{{ item.causeRemark }}</span>
      </li>
    </ul>
    <el-form v-if="this.orderStatus == 2">
      <el-form
        :inline="true"
        :model="formInline"
        :rules="rules"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-form-item prop="hintMessageAuthType">
          <el-select
            v-model="formInline.hintMessageAuthType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in hintMessageAuthData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="hintMessage">
          <el-input
            v-model="formInline.hintMessage"
            placeholder="审批人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="hintStatus">
          <el-checkbox v-model="formInline.hintStatus">提醒更新</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hintPrimary" v-if="showOrderMessage"
            >写一条</el-button
          >
        </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>

<script>
import {
  getfindListData,
  getEmployee,
  orderMessage,
  getProductUrl
} from "../../assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "OperationRecords",
  props: ["orderNumber"],
  data() {
    return {
      formInline: {
        hintMessageAuthType: "",
        hintMessage: "",
        hintStatus: true,
        orderNumber: this.orderNumber
      },
      orderStatus: "",
      findList: [],
      // 查看人类型数据
      hintMessageAuthData: [],
      rules: {
        hintMessageAuthType: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        hintMessage: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getfindListData();
    this.hintMessageAuthType();
    this.findProductUrl(this.orderNumber);
  },
  computed: {
    //写一条按钮
    showOrderMessage: function() {
      return checkPermiss("business:auction:message", this.golbalPermissions);
    }
  },
  methods: {
    //根据订单查询订单状态
    findProductUrl(orderNumber) {
      getProductUrl({
        orderNumber: orderNumber
      }).then(res => {
        this.orderStatus = res.data.orderStatus;
      });
    },
    getfindListData() {
      getfindListData(this.orderNumber).then(res => {
        this.findList = res.data;
      });
    },
    // 查看人类型
    hintMessageAuthType() {
      getEmployee("hint_message_auth_type").then(res => {
        this.hintMessageAuthData = res.data;
      });
    },
    // 写一条按钮
    hintPrimary() {
      if (this.formInline.hintStatus == true) {
        this.formInline.hintStatus = 1;
      } else {
        this.formInline.hintStatus = 0;
      }
      this.$refs.formInline.validate().then(() => {
        orderMessage(this.formInline).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.$refs.formInline.resetFields();
          } else {
            this.$message({
              message: res.message,
              type: "error"
            });
            this.$refs.formInline.resetFields();
          }
        });
      });
    }
  }
};
</script>

<style scoped type="less">
ul {
  text-align: left;
  margin: 20px 40px;
  line-height: 30px;
}
.el-form {
  text-align: left;
}
::v-deep .el-input__inner {
  height: 30px;
  width: 150px;
}
::v-deep .el-select .el-input .el-select__caret {
  line-height: 30px;
}
::v-deep .el-form-item__content {
  line-height: 30px;
}
.el-button {
  height: 30px;
  width: 80px;
  line-height: 5px;
}
span {
  margin-right: 5px;
}
</style>
